/********************************/
/*** DROP DOWN                ***/
/********************************/

@mixin _drop-down-fake($type: $APP) {
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
    display: block;
    padding: 7px 20px 6px 10px !important;
    background: url(_theme($MENU-CLOSED--ARROW, $type)) no-repeat right 5px center, _theme($MENU-CLOSED--BG, $type);

    &:hover {
        box-shadow: _theme($MENU-CLOSED--SHADOW---HOVER, $type);

    }

    @include text(_size("small"), _theme($MENU-CLOSED--COLOR, $type), _weight("extralight"));
}

@mixin _drop-down($type: $APP) {

    input.x-form-text {
        width: 100% !important;
        height: auto !important;
        box-sizing: border-box;
        display: block;
        padding: 7px 20px 6px 10px !important;

        pointer-events: none; // Force Drop Down style when neccessary

        background: _theme($MENU-CLOSED--BG, $type);
        box-shadow: _theme($MENU-CLOSED--SHADOW, $type);

        @include text(_size("small"), _theme($MENU-CLOSED--COLOR, $type), _weight("extralight"));

        &::-webkit-input-placeholder {
            color: _theme($MENU-CLOSED--COLOR, $type);
        }

        &:-moz-placeholder {
            color: _theme($MENU-CLOSED--COLOR, $type);
        }

        &::-moz-placeholder {
            color: _theme($MENU-CLOSED--COLOR, $type);
        }

        &:-ms-input-placeholder {
            color: _theme($MENU-CLOSED--COLOR, $type);
        }

    }

    // Trigger
    img {
        position: absolute;
        top: 0;
        right: 0;
        width: 100% !important;
        height: 100% !important;
        border: none !important;

        background: url(_theme($MENU-CLOSED--ARROW, $type)) no-repeat right 5px center !important;

    }

    &:hover {
        input.x-form-text {
            color: _theme($MENU-CLOSED--COLOR---HOVER, $type);
            background: _theme($MENU-CLOSED--BG---HOVER, $type);
            box-shadow: _theme($MENU-CLOSED--SHADOW---HOVER, $type);
        }

        img {
            background-image: _theme($MENU-CLOSED--ARROW---HOVER, $type);
            background-color: transparent !important;
        }
    }

}


@mixin _drop-down-muted($type: $APP) {

    width: auto !important;

    input.x-form-text {
        width: 100% !important;
        height: auto !important;
        box-sizing: border-box;
        display: block;
        padding: 7px 20px 6px 10px !important;

        pointer-events: none; // Force Drop Down style when neccessary

        background: _theme($MENU-MUTED-CLOSED--BG, $type);
        box-shadow: _theme($MENU-MUTED-CLOSED--SHADOW, $type);

        @include text(_size("small"), _theme($MENU-MUTED-CLOSED--COLOR, $type), _weight("extralight"));

        &::-webkit-input-placeholder {
            color: _theme($MENU-MUTED-CLOSED--COLOR, $type);
        }

        &:-moz-placeholder {
            color: _theme($MENU-MUTED-CLOSED--COLOR, $type);
        }

        &::-moz-placeholder {
            color: _theme($MENU-MUTED-CLOSED--COLOR, $type);
        }

        &:-ms-input-placeholder {
            color: _theme($MENU-MUTED-CLOSED--COLOR, $type);
        }

    }

    // Trigger
    img {
        position: absolute;
        top: 0;
        right: 0;
        width: 100% !important;
        height: 100% !important;
        border: none !important;

        background: url(_theme($MENU-MUTED-CLOSED--ARROW, $type)) no-repeat right 5px center !important;

    }

    &:hover {
        input.x-form-text {
            color: _theme($MENU-MUTED-CLOSED--COLOR---HOVER, $type);
            background: _theme($MENU-MUTED-CLOSED--BG---HOVER, $type);
            box-shadow: _theme($MENU-MUTED-CLOSED--SHADOW---HOVER, $type);
        }

        img {
            background-image: _theme($MENU-MUTED-CLOSED--ARROW---HOVER, $type);
            background-color: transparent !important;
        }
    }

}
